<template>
	<view class="page bg-fff">
		<metro-map :polyline="polylineArr" :name="subwayList[currentLine]?.nameSplit" :color="subwayList[currentLine]?.color" :current="currentLine" :stations="stationArr"></metro-map>
		<u-gap height="10" bgColor="#ffffff"></u-gap>

        <view class="content bg-fff flex">
            <scroll-view scroll-y class="left-aside">
				<block v-for="(item, index) in subwayList" :key="index">
					<view class="f-item font14 text-center txtHidden" :class="{active: index === currentLine}" @click="tabClick(index)">
						{{item.label}}
					</view>
				</block>
            </scroll-view>
            
            <scroll-view scroll-y class="right-aside" v-show="subwayList.length > 0 && subwayList[currentLine]?.station.length > 0">
                <view class="stationBox">
                    <block v-for="(item, index) in subwayList[currentLine]?.station" :key="index">
                        <view class="stationItem flex" @click="navTo(item)">
                            <text>{{item.title}}</text>
                            <view class="rightArrow flex">
                                <text class="num flex font10 bg-theme col-fff" v-if="item.count">{{item.count}}</text>
                                <u-icon name="arrow-right" color="#8A8A8A" size="14"></u-icon>
                            </view>
                        </view>
                    </block>
                </view>
            </scroll-view>
        </view>
	</view>
</template>

<script>
	import MetroMap from './components/metro-map.vue';
	import { mapState, mapActions } from 'pinia';
    import { useUserInfoStore, useConfigStore, useIndexStore } from '@/store/index';
	import { getPolylineAndStationOfLine } from '@/common/utils/map-tools';
	import { getSubway } from "@/common/api";
	export default {
		components:{
			MetroMap
		},
		data() {
			return {
				currentLine: 0,
				subwayList: [],
				polylineArr: [{
					points: [],
					color: '#007235',
					width: 3
				}],
				stationArr: [],
				cityCode: '',
			}
		},

		onShareAppMessage(res) {
            return {
                title: `上海地铁找房，地铁新房一图汇总`,
				path: `/pages/houses/metro-find-houses/metro-lines?city=${this.cityCode}&puid=${useUserInfoStore.userInfo.id}`,
            }
        },
        //#ifdef MP-WEIXIN
        onShareTimeline() {
            return {
                title: `上海地铁找房，地铁新房一图汇总`,
                query: `city=${this.cityCode}&puid=${useIndexStore.userInfo.id}`
            }
        },
        //#endif
		onLoad(options){
            const that = this;
			let { puid='' } = options;
            if(puid) {
                this.setPuid(puid)
            }

            this.cityCode = this.nowCityCode;
                
			uni.$check_and_login(function() {
				that.init()
			})
		},
		computed:{
			...mapState(useUserInfoStore, ['userInfo']),
			...mapState(useIndexStore, ['cityMap', 'nowCityCode'])
		},
		methods: {
            ...mapActions(useConfigStore,['setPuid']),

			//初始化获取所有线路
			async init() {
				let metroList = [];
				if(this.cityMap[this.cityCode]){
                    metroList = this.cityMap[this.cityCode].city[0].subway;
				}else{
					let metroRes = await getSubway(this.cityCode);
					metroList = metroRes.detail;
				}
				this.subwayList = metroList.map(item => {
					return {
						label: item.label,
						value: item.value,
						nameSplit: item.label.split('号线'),
						polyline: [],
						station: [],
						color: item.color?item.color:''
					}
				})
				await this.getStationOfLine();
			},

			//根据线路获取站点
			async getStationOfLine(){
				let { polylineArr, stationArr, color } = await getPolylineAndStationOfLine({
					cityCode: this.cityCode,
					subways: this.subwayList,
					currentLine: this.currentLine
				})

				if(polylineArr.length > 0) {
					this.polylineArr[0].points = this.subwayList[this.currentLine].polyline = polylineArr;
					this.subwayList[this.currentLine].station = stationArr;
					this.stationArr = stationArr;
				}

				if(color) {
                    this.subwayList[this.currentLine].color = color;
                    this.polylineArr[0].color = color;
                }
			},

			//tab点击切换线路
			tabClick(index){
				this.currentLine = index;
				this.getStationOfLine();
			},

			//跳转站点内附近房源
			navTo(item){
				let subway = this.subwayList[this.currentLine].value
				uni.navigateTo({
					url: `/pages/products/metro/station-products?city=${this.cityCode}&subway=${subway}&station=${item.title}`
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	.page {
		width: 100%;
        height: 100vh;
	}
    .content {
    	width: 100%;
		/* #ifdef MP-WEIXIN || MP-TOUTIAO */
        height: calc(100vh - 410rpx);
		/* #endif */
		/* #ifdef MP-BAIDU */
        height: 100vh;
		/* #endif */
		justify-content: flex-start;
    }
	.left-aside {
		flex-shrink: 0;
		width: 200rpx;
		height: 100%;
	}
	.f-item {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		color: $uni-text-color;
		position: relative;
		&.active{
			color: $uni-text-color-grey;
			background: #f8f8f8;
			&:before{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36rpx;
				width: 8rpx;
				background-color: $uni-bg-color;
				border-radius: 0 4px 4px 0;
				opacity: .8;
			}
		}
	}

	.right-aside{
		width: calc(100% - 200rpx);
		height: 100%;
		display: block;
		overflow: hidden;
		padding-left: 6rpx;
        .stationBox{
            padding: 10rpx 10rpx 10rpx 20rpx;
            .stationItem{
                padding: 20rpx 5rpx;
                width: 100%;
                justify-content: space-between;
                border-bottom: 1rpx solid rgba(0,0,0,.04);
                &:last-child{
                    border: none;
                }
                .rightArrow{
                    .num{
                        width: 38rpx;
                        height: 38rpx;
                        border-radius: 50%;
                        margin-right: 5rpx;
                    }
                }
            }
        }
	}
</style>